import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('弹性布局'),
      ),
      body: const MyFlex(),
    ),
  ));
}

/// 1.Padding
/// A widget that insets its child by the given padding.
/// 设置padding的child与父容器(也就是padding)的间距
/// padding的大小其实是自适应根据child大小的，这里可以比较
/// height和width大小分别设置为  double.infity与200时候利用Devtools比较padding的大小
class MyPadding extends StatelessWidget {
  const MyPadding({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Container(
        height: 200,
        width: 200,
        color: Colors.blue,
      ),
    );
  }
}

/// 2.Row
///

class MyRow extends StatelessWidget {
  const MyRow({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.maxFinite,
      height: double.maxFinite,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        // crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          MyIcon(myColor: Colors.red, myIcon: Icons.access_alarm),
          MyIcon(myColor: Colors.blue, myIcon: Icons.ac_unit),
        ],
      ),
    );
  }
}

/// 3.Column
///
class MyColumn extends StatelessWidget {
  const MyColumn({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: double.infinity,
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          MyIcon(myColor: Colors.red, myIcon: Icons.access_alarm),
          MyIcon(myColor: Colors.blue, myIcon: Icons.ac_unit),
        ],
      ),
    );
  }
}

/// 3.Flex与Expanded
///
class MyFlex extends StatefulWidget {
  const MyFlex({super.key});

  @override
  State<MyFlex> createState() => _MyFlexState();
}

class _MyFlexState extends State<MyFlex> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Container(
          height: 180,
          color: Colors.blue,
        ),
        Container(
          height: 180,
          child: Row(
            children: [
              Expanded(
                flex: 2,
                child: SizedBox(
                  child: Image.network(
                    'https://q8.itc.cn/images01/20240407/c5e9233c44f9435db7027b7bd5f1f55f.jpeg',
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              Expanded(
                  flex: 1,
                  child: Container(
                    padding: const EdgeInsets.all(5),
                    // color: Colors.green,
                    child: Column(
                      children: [
                        Expanded(
                          flex: 1,
                          child: Image.network(
                            'https://q8.itc.cn/images01/20240407/c5e9233c44f9435db7027b7bd5f1f55f.jpeg',
                            fit: BoxFit.fill,
                            width: double.infinity,
                          ),
                        ),
                        const SizedBox(
                          height: 5,
                        ),
                        Expanded(
                          flex: 1,
                          child: Image.network(
                            'https://q8.itc.cn/images01/20240407/c5e9233c44f9435db7027b7bd5f1f55f.jpeg',
                            fit: BoxFit.fill,
                            width: double.infinity,
                          ),
                        )
                      ],
                    ),
                  ))
            ],
          ),
        )
      ],
    );
  }
}

/// 封装一个公共组件
///
class MyIcon extends StatefulWidget {
  IconData myIcon;
  Color? myColor;
  MyIcon({super.key, required this.myColor, required this.myIcon});

  @override
  State<MyIcon> createState() => _MyIconState();
}

class _MyIconState extends State<MyIcon> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 80,
      height: 80,
      color: widget.myColor,
      child: Icon(
        widget.myIcon,
      ),
    );
  }
}
